<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个 JQuery 程序</title>
    <!-- 第一：下载JQ -->

    <!-- 第二：在页面中，导入 JQ 文件 -->
    <script src="../../../jquery-3.7.1.js"></script>

    
</head>
<body>
    <ul>
        <li id="dg">星期一</li>
        <li id="eg">星期二</li>
        <li id="sj">星期三</li>
        <li id="sm">星期四</li>
        <li id="wd">星期五</li>
        <li id="sat">星期六</li>
        <li id="sun">星期天</li>
    </ul>

    <h1>好</h1>
    <h2>好</h2>
    <h3>学</h3>
    <h4>习</h4>
    <h5>天</h5>
    <h6>天</h6>
   

    <div id="gg" style="width:200px;height: 50px;background: red;color:yellow;display:none;">
        好好学习，天天向上
    </div>

    <button id="btn1">动画</button>
    <button id="btn2">获取正在发生动画的元素</button>

    <!-- 第三：使用 JQ -->
    <script>

        $("#btn1").click(function(){
            $("#gg").show(5000) ;
        }) ;

        $("#btn2").click(function(){
            // 10.选择正在发生动画的元素
            $("div:animated").css("color","black") ;
        }) ;


        // 过滤选择器：不是方法，它是在现有选择器的基础进行使用
        // 1.选择第一个元素
        // $("ul li:first").css("color","red") ;

        // 2.选择最后一个元素
        // $("ul li:last").css("color","blue") ;

        // 3.选择下标索引的元素
        // $("ul li:eq(3)").css("color","green") ;


        // 4.排除
        // $("ul li:not('#sat'):not('#sun')").css("color","green") ;

        // 5.选择下标索引为偶数的 li
        // $("ul li:even").css("color","green") ;
        
        // 6.选择下标索引为奇数的 li
        // $("ul li:odd").css("color","blue") ;


        // 7.选择下标索引大于指定值的 li
        // $("ul li:gt(2)").css("color","blue") ;

        // 8.选择下标索引小于指定值的 li
        // $("ul li:lt(2)").css("color","blue") ;

        // 9.选择 h1 ~ h6 标题标记
        // $(":header").css("color","blue") ;
    </script>
</body>
</html>